<template>
  <div>
    <el-form :model="formModel" ref="form" label-width="100px">
      <el-form-item label="学科:">
        <el-select v-model="formModel.subjectId" placeholder="请选择学科">
          <el-option
            v-for="item in subjects"
            :key="item.subject.id"
            :label="item.subject.name"
            :value="item.subject.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题干:">
        <el-input v-model="formModel.content" type="textarea"/>
      </el-form-item>
      <el-form-item label="答案:">
        <el-input v-model="formModel.correctAnswer" type="textarea"/>
      </el-form-item>
      <el-form-item label="分数:">
        <el-input-number v-model="formModel.score"/>
      </el-form-item>
      <el-form-item label="难度:">
        <el-rate v-model="formModel.difficultyLevel" :max="3"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">确认</el-button>
        <el-button type="success" @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: "ShortQuestion",
  mounted() {
    this.getSubject();
  },
  data() {
    return {
      formModel: {
        subjectId: '',
        questionType: 5,
        content: '',
        correctAnswer: '',
        score: '',
        difficultyLevel: 0,
      },
      subjects: [],
    }
  },
  methods: {
    submit() {
      const url = '/questions/blank';
      this.axios.post(url, this.formModel).then(resp => {
          if (resp.code === 200) {
            this.$message({
              type: "success",
              message: '添加成功',
              center: true,
            });
            this.$router.push({name: 'QuestionPage'});
          } else {
            this.$message({
              type: "error",
              message: resp.message,
              center: true,
            });
          }
        }
      )
    },
    getSubject() {
      const url = '/subjects';
      this.axios.get(url).then(resp => {
        this.subjects = resp.data;
      })
    },
    cancel() {
      this.$router.push({name: 'QuestionPage'});
    }
  },
}
</script>

<style scoped>
::v-deep(.el-form-item__label) {
  font-weight: bold;
}

::v-deep(.el-rate) {
  font-size: 2.2em;
}

#option-box {
  div {
    display: flex;
    align-items: center;
    margin: 10px 20px;
  }

}
</style>